<template>
  <div class="fortune-telling">
    <el-button @click="tellFortune" :disabled="!canTellFortune" class="fortune-button">
      {{ canTellFortune ? '开始算卦' : '今日已算卦' }}
    </el-button>
    <div v-if="result" class="result">
      <p v-text="result.message" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits } from 'vue'
import { useMainStore } from '@/plugins/store'

const store = useMainStore()
const result = ref(null)
const player = ref(store.player)

const emit = defineEmits(['game-result'])

const canTellFortune = computed(() => {
  const now = new Date()
  const lastFortune = new Date(player.value.fortuneTellingDate)
  return (!player.value.fortuneTellingDate || now.toDateString() !== lastFortune.toDateString())
})

const tellFortune = () => {
  if (!canTellFortune.value) return
  const fortunes = ['大吉', '中吉', '小吉', '吉', '末吉', '凶', '大凶']
  const fortune = fortunes[Math.floor(Math.random() * fortunes.length)]
  const reward = fortune === '大吉' ? 50 : fortune === '中吉' ? 30 : fortune === '小吉' ? 20 : 0
  result.value = {
    message: `您的运势是: ${fortune}${reward > 0 ? `，获得${reward}灵石！` : ''}`
  }
  player.value.fortuneTellingDate = new Date().toISOString()
  player.value.props.money += reward
  emit('game-result', { reward, success: reward > 0 })
}
</script>

<style scoped>
.fortune-telling {
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: var(--el-box-shadow-light);
}

.fortune-button {
  width: 100%;
  background-color: var(--el-color-primary);
  color: var(--el-color-white);
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.fortune-button:hover {
  opacity: 0.9;
}

.fortune-button:disabled {
  background-color: var(--el-button-disabled-bg-color);
  color: var(--el-button-disabled-text-color);
}

.result {
  margin-top: 20px;
  font-size: 16px;
  color: var(--el-text-color-primary);
}
</style>
